import React, { useEffect } from "react";
import { Tabs } from "antd";
import "./fenlei.css";
import type { TabsProps } from "antd";
import axios from "../../axios/axios";
import { Divider, Flex, Tag } from "antd";

const onChange = (key: string) => {
  console.log(key);
};

function Fenlei() {
  useEffect(() => {
    axios({
      url: "http://blogapi.shbwyz.com/tag/list",
      method: "get",
    }).then((res) => {
      console.log(res);
      setList(res.data);
    });
  }, []);
  const [list, setList] = React.useState([]);
  const items: TabsProps["items"] = [
    {
      key: "1",
      label: "首页",
      children: "Content of Tab Pane 1",
    },
    {
      key: "2",
      label: "归档",
      children: "Content of Tab Pane 1",
    },
    {
      key: "3",
      label: "分类",
      children: (
        <div>
          {list.map((item) => {
            return (
              <Tag className="tag" color="magenta">
                {item.name}
                <div className="count">{item.count}</div>
              </Tag>
            );
          })}
        </div>
      ),
    },
    {
      key: "4",
      label: "关于",
      children: "Content of Tab Pane 3",
    },
  ];
  return (
    <div>
      <div>
        <Tabs defaultActiveKey="3" items={items} onChange={onChange} />
      </div>
    </div>
  );
}

export default Fenlei;
